<?php require VIEWPATH. ADMIN_DIR. DIRECTORY_SEPARATOR. 'header.php'?>
<style type="text/css">
	.ace-thumbnails>li {
		margin: 4px;
	}
</style>
<!-- 引入toastr.css -->
<link rel="stylesheet" href="<?=$staticAdminUrl?>assets/toastr/toastr.min.css">
	<div class="page-header">
		<h1>
			<a class="a-back" href="<?= admin_url('contents/album_list_by_admin') ?>">
				<i class="fa fa-reply"></i>
			</a>
			<?=isset($cateByAdminInfo) ? '编辑相册' : '发布相册'?>
		</h1>
	</div>
	<div class="col-xs-12">
		<form class="form-horizontal" id="classes-form">
			<input type="hidden" name="id" value="<?= isset($cateByAdminInfo['id']) ? $cateByAdminInfo['id'] : 0 ?>" />
			<div class="form-group">
				<label class="col-sm-3 control-label no-padding-right">相册标题：</label>
				<div class="col-sm-6">
					<input class="form-control" type="text" name="title" value="<?= isset($cateByAdminInfo['title']) ? $cateByAdminInfo['title'] : '' ?>" placeholder="请填写相册标题"/>
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-3 control-label no-padding-right">相册图片：</label>
				<div class="col-sm-6">
					<ul class="ace-thumbnails clearfix">
						<li>
							<a href="javascript:;" id="upload-img" title="上传相册">
								<img class="fit-cover" src="<?=$staticAdminUrl?>assets/images/upload.png" width="150" height="150" />
							</a>
						</li>
						<?php foreach($imgArr as $item): ?>
							<li>
								<a href="<?= $item['src'] ?>"  data-rel="colorbox" class="cboxElement">
									<img src="<?= $item['src'] ?>" width="150" height="150" class="fit-cover">
								</a>
								<div class="tags">
									<?php if($item['recommend']): ?>
									<span class="label-holder">
										<span class="label label-info">推荐</span>
									</span>
									<?php endif; ?>
								</div>

								<div class="tools tools-bottom">
									<a href="#modal-image" class="green show-img-dialog" data-toggle="modal" data-recommend="<?= $item['recommend'] ?>">
										<i class="ace-icon fa fa-edit"></i>
									</a>
									<a href="javascript:;" class="red image-delete">
										<i class="ace-icon fa fa-trash"></i>
									</a>
								</div>
							</li>
						<?php endforeach; ?>
					</ul>
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-3 control-label no-padding-right">发布班级：</label>
				<div class="col-sm-6">
					<?php foreach($gradeArray as $key => $grade): ?>
						<div class="well well-sm">
							<a class="blue select-grade" href="javascript:;" title="全选年级"><?=$key?> <span style="color: #999;margin-left: 5px">(点击选中全部班级)</span></a>
							<div class="mt5">
							<?php foreach($grade['class'] as $class): ?>
								<label class="inline checkbox-item mr20">
									<input class="ace" type="checkbox" name="video_class" value="<?=$class['id']?>" />
									<span class="lbl"> <?=$class['class_name']?></span>
								</label>
							<?php endforeach; ?>
							</div>
						</div>
					<?php endforeach; ?>
				</div>
			</div>
			<div class="clearfix">
				<div class="col-md-offset-3 col-md-9">
					<a class="btn btn-info btn-submit">
						<i class="ace-icon fa fa-check"></i> 提交
					</a>
				</div>
			</div>
		</form>
	</div>
	<!-- 图片上传弹窗 -->
	<div id="modal-image" class="modal fade">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header no-padding">
					<div class="table-header">
						<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
							<span class="white">&times;</span>
						</button>
						相册图片管理
					</div>
				</div>
				<div class="modal-body no-padding">
					<div class="row">
						<div class="col-xs-12">
							<form class="form-horizontal mt10" id="image-form">
								<input type="hidden" name="li_sort" />
								<div class="form-group">
									<label class="col-sm-2 control-label no-padding-right">推荐首页：</label>
									<div class="col-sm-9">
										<select name="image_recommend" class="form-control">
											<option value="0">否</option>
											<option value="1">是</option>
										</select>
									</div>
								</div>
							</form>
						</div>
					</div>
				</div>
				<div class="modal-footer no-margin-top" >
					<a id="save-image" href="javascript:;" class="btn btn-sm btn-primary" data-dismiss="modal" aria-hidden="true">
						<i class="ace-icon fa fa-check"></i> 保存
					</a>
				</div>
			</div>
		</div>
	</div>
<?php require VIEWPATH. ADMIN_DIR. DIRECTORY_SEPARATOR. 'footer.php'?>
<!-- 引入toastr.js,基于jquery.js，故得在footer.php后面引用-->
<script src="<?=$staticAdminUrl?>/assets/toastr/toastr.min.js"></script>
<script type="text/javascript">
	$(function(){
		<?php if(isset($cateByAdminInfo) && $cateByAdminInfo): ?>
			// 选中接收的班级
			var classArray = "<?=$cateByAdminInfo['class_ids']?>".split(",");
			for(var i in classArray) $("[name=video_class][value="+ classArray[i] +"]")[0].checked = true;
		<?php endif; ?>

		// 点击年级，全选下级班级
		var cancel = false;
		$(".select-grade").click(function(){
			// 第一选择，第二次取消选择
			if(cancel) {
				// 取消选择
				$(this).parent().find("[name=video_class]").each(function(){
					$(this)[0].checked = false;
				});
				cancel = ! cancel;
			} else {
				// 选择
				$(this).parent().find("[name=video_class]").each(function(){
					$(this)[0].checked = true;
				});
				cancel = ! cancel;
			}
		})

		// 上传图片对象
		$("#upload-img").uploader({
			"multiple": true, // 多图上传
			"server":  '<?=UP_FORM_URL?>',
			"authorization": "<?=$signature?>",
			"policy": "<?=$policy?>",
			"callback": function(response) {
				var imgFile = "<?=UP_URL?>" + response.url;
				$(".ace-thumbnails").append('\
					<li>\
						<a href="' + imgFile + '" data-rel="colorbox" class="cboxElement">\
							<img class="img-material" src="' + imgFile + '" width="150" height="150" class="fit-cover">\
							<div class="text">\
								<div class="inner"></div>\
							</div>\
						</a>\
						<div class="tags">\
							<span class="label-holder">\
								<span class="label label-info">推荐</span>\
							</span>\
						</div>\
						<div class="tools tools-bottom">\
							<a href="#modal-image" class="green show-img-dialog" data-toggle="modal" data-recommend="1" >\
								<i class="ace-icon fa fa-edit"></i>\
							</a>\
							<a href="javascript:;" class="red image-delete">\
								<i class="ace-icon fa fa-trash"></i>\
							</a>\
						</div>\
					</li>\
				');
				$('.ace-thumbnails [data-rel="colorbox"]').colorbox(colorbox_params);
			}
		});

		// 提交
		$("body").on("click", ".btn-submit", function(e){
			// 提交数据
			var postUrl = "<?=admin_url('contents/save_album_by_admin_action')?>";
			var id = $("[name=id]").val();
			var title = $("[name=title]").val();
			var classArr = [];
			$("[name=video_class]").each(function() {
				if($(this).prop("checked")) {
					classArr.push($(this).val());
				}
			});
			var classIds = classArr.join(',');
			var imgArr = new Array();
			$("ul.ace-thumbnails li").each(function() {
				var imgSrc = $(this).find(".cboxElement img").attr("src");
				if(imgSrc) {
					var recommend = $(this).find(".tags .label-holder").length == 0 ? 0 : 1;
					imgArr.push({
						'src': imgSrc,
						'recommend': recommend
					});
				}
			});
			// console.log(classIds);return;
			var postData = {
				"id": id,
				"img_arr": imgArr,
				"class_ids": classIds,
				"title": title
			};
			ajax_post(postUrl, postData, function(res){
				window.location.href = "<?=admin_url('contents/album_list_by_admin')?>";
			})
			
		})

		// 图片轮播
		var colorbox_params = {
			rel: 'colorbox',
			reposition:true,
			scalePhotos:true,
			scrolling:false,
			previous:'<i class="ace-icon fa fa-arrow-left"></i>',
			next:'<i class="ace-icon fa fa-arrow-right"></i>',
			close:'&times;',
			current:'',
			maxWidth:'100%',
			maxHeight:'100%',
			onOpen:function(){
				$overflow = document.body.style.overflow;
				document.body.style.overflow = 'hidden';
			},
			onClosed:function(){
				document.body.style.overflow = $overflow;
			},
			onComplete:function(){
				$.colorbox.resize();
			}
		};
		$('.ace-thumbnails [data-rel="colorbox"]').colorbox(colorbox_params);
		// 显示弹窗
		$("body").on("click", ".show-img-dialog", function(){
			var imageForm = $("#image-form");
			imageForm.find("[name=image_recommend]").val($(this).data("recommend"));
			var thisLi = $(this).parents("li");
			// console.log(thisLi);return;
			var liSort = $("ul.ace-thumbnails li").index(thisLi);
			imageForm.find("[name=li_sort]").val(liSort);
		})
		// 修改是否推荐首页
		$("#save-image").click(function(){
			var imageForm = $("#image-form");
			var recommend = imageForm.find("[name=image_recommend]").val();
			var liSort = imageForm.find("[name=li_sort]").val();
			// console.log(liSort);return;
			if(recommend == 1) {
				// 推荐首页：是
				$("ul.ace-thumbnails li:nth(" + liSort + ") .tags").html('<span class="label-holder"><span class="label label-info">推荐</span></span>');
				$("ul.ace-thumbnails li:nth(" + liSort + ") .show-img-dialog").data("recommend", 1);
			} else {
				// 推荐首页：否
				$("ul.ace-thumbnails li:nth(" + liSort + ") .tags").html('');
				$("ul.ace-thumbnails li:nth(" + liSort + ") .show-img-dialog").data("recommend", 0);
			}
			
		})
		// 删除图片
		$("body").on("click", ".image-delete", function(e){
			var that = $(this);
			var id = $(this).data("id");
			layer.confirm('确定删除这张图片吗？', function(index){
				var li = that.parents("li");
				that.parents("li").remove();
				layer.close(index);
			});
		})
	})
</script>